<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>背景</title>
		<style type="text/css">
			body{
				/* background-image: url(img/牛爷爷.webp);
				background-repeat: no-repeat;
				背景图片是否随着页面一起滚动
				1.scroll:背景图滚动
				2.fixed:固定*/
				/* background-attachment: fixed; 
				background-position: left center; 
				 */
				/* 复合写法:
				background:color image repeat attachment position/size; */
				background: #cccccc url(img/牛爷爷.webp) no-repeat fixed center/100% ;
			}
			.box{
				width: 300px;
				height: 300px;                 /* 第四个值取0~1之间 代表透明度 */
				background-color: rgba(255, 0, 0, 0.5)    /* transparent; */
				border: 1px solid red;
				font-size: 36px;
			}
			.box2{
				width:1400px;
				height:900px;
				border:1px solid red;
				font-size: 36px;
				color: #fff;
				/* background-image: url(img/牛爷爷.webp); */
				/* 背景图片是否重复显示
				1.no-repeat:不重复
				2.repeat:重复
				3.repeat-x:水平方向上显示
				4.repeat-y: 垂直方向上显示
				*/
				background-repeat: repeat-y;
			}
		</style>
	</head>
	<body>
		<div class="box">
			内容
		</div>
		<div class="box2">社会牛爷爷</div>
	</body>
</html>
